<template>
	<view class="container-shop">
			<view class="navbar" :style="{ top: saveTop + 'px' }">
			<view class="nav-btn left-btn" @click="goBack">
				<uni-icons type="arrow-left" size="28" color="#333" />
			</view>
			<view class="nav-title">{{ pageTitle }}</view>
			<view class="nav-btn" :class="{ 'right-btn': isAdmin }" v-if="isAdmin" @click="shop_admin">
				<uni-icons type="gear" size="26" color="#007aff" />
			</view>
		</view>

		<!-- 搜索栏：修复margin-top导致的与导航栏重叠问题 -->
		<view class="search-bar-wrapper" :style="{'marginTop':saveTop+60+'px'}">
				<view class="search-bar" @click="handleSearch">
			<view class="search-icon">
				<uni-icons type="search" size="24" color="#999" />
			</view>
			<view class="search-placeholder">搜索商品</view>
			<view class="search-btn">搜索</view>
		</view>
			
		</view>
	

		<!-- 主分类横向滚动：修复内部元素排列，确保add-category-tip正常显示 -->
		<scroll-view v-if="categoryData.length > 0" class="category-scroll" scroll-x>
			<!-- 用flex容器包裹，确保横向排列一致性 -->
			<view class="category-scroll-content">
				<view v-for="(item, index) in categoryData" :key="item.id" @click="changeCategory(item.id)">
					<view class="category-item" :class="[ selectedCategoryId === item.id ? 'active' : '']">
						<!-- 分类编辑遮罩：修复层级，避免遮挡文字 -->
						<view class="category-edit-mask" v-if="isEdit">编辑</view>
						<text>{{ item.name }}</text>
					</view>
				</view>
				<!-- 分类设置按钮：确保在滚动容器内正常显示 -->
				<view class="add-category-tip" v-if="isAdmin && isEdit" @click="handleCategoryEdit">
					<uni-icons type="compose" size="22rpx" class="tip-icon" />
					<text>分类设置</text>
				</view>
			</view>
		</scroll-view>

		<!-- 子分类纵向侧边栏：修复top值，适配导航栏高度变化 -->
		<view v-if="submenushow && currentSubCategories.length > 0" class="sub-category" :style="{ top: `${150 + saveTop}px` }">
			<view
				class="sub-category-item"
				:class="{ active: subCategoryId === item.id }"
				v-for="(item, index) in currentSubCategories"
				:key="item.id"
				@click="handleSubCategory(item.id)"
			>
				{{ item.name }}
			</view>
		</view>

		<!-- 商品列表容器：修复高度计算，适配安全区 -->
		<view class="product-container" :class="{ 'has-sub-category': currentSubCategories.length > 0 }">
			<!-- 无商品提示 -->
			<view v-if="productList.length === 0" class="empty-tip">
				<uni-icons type="empty" size="60" color="#ccc" />
				<text class="empty-text">暂无商品数据</text>
			</view>

			<!-- 商品列表滚动区：修复高度溢出问题 -->
			<scroll-view v-else class="product-list" scroll-y @scrolltolower="loadMore" enable-back-to-top>
				<!-- 网格模式（搜索结果/默认） -->
				<view class="product-grid" v-if="isSearch">
					<view v-for="(product, index) in productList" :key="product.productId" class="product-card" @click="navigateToDetail(product)">
						<!-- 商品图片 -->
						<view class="card-img-wrapper">
							<image
								:src="product.images && product.images[0] && product.images[0].url ? product.images[0].url : '/static/default-goods.png'"
								class="product-img"
								mode="aspectFill"
								lazy-load
							/>
							<!-- 促销标签 -->
							<view v-if="product.tag" class="product-tag" :style="tagStyle(product.tag)">
								{{ product.tag }}
							</view>
							<!-- 管理员操作区 -->
							<view class="card-admin-ops" v-if="isAdmin">
								<view class="admin-op-item redo" @click.stop="toShare(product)">
									<uni-icons type="redo-filled" size="22" color="#007aff" />
									<text>分享</text>
								</view>
								<view class="admin-op-item cardshow" @click.stop="cardshow(product)">
									<uni-icons type="upload-filled" size="22" color="#007aff" />
									<text>卡片</text>
								</view>
							</view>
							<!-- 编辑模式遮罩 -->
							<view class="edit-mask" v-if="isEdit" @click.stop="editgood">
								<uni-icons type="gear" size="40" color="#fff" />
								<text class="edit-text">管理商品</text>
							</view>
						</view>

						<!-- 商品信息 -->
						<view class="card-info">
							<text class="card-title">{{ product.productName }}</text>
							<text class="card-desc">{{ product.description }}</text>
							<view class="card-price-bar">
								<text class="current-price">¥{{ product.price.toFixed(2) }}</text>
								<text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice.toFixed(2) }}</text>
							</view>
							<view class="card-sales-bar">
								<text class="sales-count">已售{{ product.sales }}件</text>
								<image src="/static/shoping.png" class="add-cart-icon" @click.stop="addToCart(product)" mode="widthFix" />
							</view>
						</view>
					</view>
				</view>

				<!-- 列表模式（分类筛选） -->
				<view class="product-list-mode" v-else>
					<view v-for="(product, index) in productList" :key="product.productId" class="list-item">
						<view class="list-img" @click="navigateToDetail(product)">
							<image
								:src="product.images && product.images[0] && product.images[0].url ? product.images[0].url : '/static/default-goods.png'"
								class="list-img-src"
								mode="aspectFill"
							/>
						</view>
						<view class="list-info">
							<text class="list-title" @click="navigateToDetail(product)">{{ product.productName }}</text>
							<text class="list-desc">{{ product.description }}</text>
							<view class="list-price">¥{{ product.price.toFixed(2) }}</view>
						</view>
						<view class="list-actions">
							<view class="quantity-container">
								<view class="quantity-btn minus-btn" v-if="getQuantity(product.productId) > 0" @click="changeQuantity(product, -1)">-</view>
								<text class="quantity-num" v-if="getQuantity(product.productId) > 0">
									{{ getQuantity(product.productId) }}
								</text>
								<view class="quantity-btn plus-btn" @click="changeQuantity(product, 1)">+</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more-wrap">
					<uni-load-more :status="loadingStatus" />
				</view>
			</scroll-view>
		</view>

		<!-- 新增商品按钮：修复bottom值，适配安全区 -->
		<view class="add-good-btn" v-if="isEdit" @click="addGood">
			<uni-icons type="compose" color="#fff" size="28" />
			<text class="add-btn-text">新品</text>
		</view>

		<!-- 分类编辑组件：修复z-index，确保覆盖在最上层 -->
		<categoryEdit 
			v-if="isCategoryEdit" 
			:categoryData="categoryData" 
			:groupId="storeData.user.userId" 
			@updataMain="updataMain" 
			@close="isCategoryEdit = false"
			:style="{ zIndex: 1000 }"
		/>
	</view>
</template>

<script>
import shopCar from '../../components/shopCar.vue';
import categoryEdit from '../../components/categoryEdit.vue';

const db = uniCloud.databaseForJQL();
const app = getApp().globalData;

export default {
	components: {
		shopCar,
		categoryEdit
	},
	data() {
		return {
			activeCategory: 0,
			subCategoryId: -1,
			isAdmin: false,
			isSearch: false,
			submenushow: true,
			isEdit: false,
			selectedCategoryId: null,
			newMainCategoryName: '',
			newSubCategoryName: '',
			localCategoryData: [],
			pageTitle: '邻里商城',
			categoryData: [],
			productList: [],
			loadingStatus: 'more',
			groupId: null,
			saveTop: 0, // 安全区顶部距离
			isCategoryEdit: false
		};
	},
	computed: {
		currentCategory() {
			return this.categoryData.find((item) => item.id === this.selectedCategoryId) || {};
		},
		currentSubCategories() {
			// 修复：兼容children为undefined的情况
			return this.currentCategory?.children || [];
		},
		storeData() {
			return this.$store.state.msg || {};
		}
	},
	mounted() {
		uni.$on('searchResult', (res) => {
			this.productList = res || [];
			this.isSearch = true;
			this.selectedCategoryId = null;
		});
		// 获取安全区信息，适配刘海屏
		const info = this.storeData.systemInfo
		this.saveTop = info.safeArea.top;
		console.log('安全区信息:', info);
	},
	onLoad(option) {
		this.groupId = option.id || '';
		this.initGood(this.groupId);
		console.log('页面参数:', option);
		// 修复：增加storeData.user存在性判断，避免报错
		if (option.action === 'admin' && this.storeData.user && option.id === String(this.storeData.user.userId)) {
			this.isAdmin = true;
		}
		this.getCategory();
		console.log('是否为管理员:', this.isAdmin);
	},
	beforeDestroy() {
		uni.$off('searchResult');
	},
	methods: {
		getQuantity(id) {
			const items = this.$store?.state.items || [];
			const target = items.find((item) => item.productId === id);
			return target?.quantity || 0;
		},
		// 打开分类编辑
		handleCategoryEdit() {
			this.isCategoryEdit = true;
		},
		// 更新分类数据
		updataMain(e) {
			// 深拷贝，避免直接修改props
			this.categoryData = JSON.parse(JSON.stringify(e));
			// 更新后默认选中第一个分类
			if (this.categoryData.length > 0 && !this.selectedCategoryId) {
				this.selectedCategoryId = this.categoryData[0].id;
			}
		},
		// 获取分类数据
		async getCategory() {
			try {
				if (!this.groupId) return; // 避免groupId为空时请求
				const { data: res } = await db.collection('groupShop').where({ groupId: this.groupId }).get();
				console.log('分类数据:', res);
				if (res.length > 0) {
					this.categoryData = res[0].category || [];
					// 默认选中第一个分类
					if (this.categoryData.length > 0 && !this.selectedCategoryId) {
						this.selectedCategoryId = this.categoryData[0].id;
					}
				} else {
					this.categoryData = [];
				}
			} catch (e) {
				console.error('获取分类失败:', e);
				this.categoryData = [];
				uni.showToast({ title: '分类加载失败', icon: 'none', duration: 2000 });
			}
		},

		// 修改购物车数量
		changeQuantity(item, delta) {
			uni.vibrateShort();
			const currentQty = this.getQuantity(item.productId);

			if (currentQty === 0) {
				// 新增商品到购物车（确保item有必要字段）
				this.$store.commit('addItem', { ...item, quantity: 1 });
				return;
			}

			const newQty = currentQty + delta;
			if (newQty > 0) {
				this.$store.commit('updateQuantity', {
					id: item.productId,
					quantity: newQty
				});
			} else {
				this.$store.commit('removeItem', item.productId);
			}
		},

		// 分享商品
		toShare(product) {
			try {
				if (!product) return;
				const formatedProduct = encodeURIComponent(JSON.stringify(product));
				uni.navigateTo({
					url: `/pages/shareGood/shareGood?product=${formatedProduct}`,
					fail: (e) => {
						console.error('进入分享页失败:', e);
						uni.showToast({ title: '分享页打开失败', icon: 'none' });
					}
				});
			} catch (e) {
				console.error('分享参数处理失败:', e);
				uni.showToast({ title: '分享失败', icon: 'none' });
			}
		},

		// 添加商品
		addGood() {
			if (!this.groupId) {
				uni.showToast({ title: '参数错误，无法添加商品', icon: 'none' });
				return;
			}
			uni.navigateTo({
				url: `/pages/myGoodList/myGoodList?=${this.groupId}`,
				fail: (e) => {
					console.error('进入添加商品页失败:', e);
					uni.showToast({ title: '添加商品页打开失败', icon: 'none' });
				}
			});
		},

		// 商品卡片分享
		cardshow(product) {
			try {
				if (!product) return;
				const formatedProduct = encodeURIComponent(JSON.stringify(product));
				uni.navigateTo({
					url: `/pages/sendGoodCard/sendGoodCard?cardInfo=${formatedProduct}`,
					fail: (e) => {
						console.error('进入卡片分享页失败:', e);
						uni.showToast({ title: '卡片分享页打开失败', icon: 'none' });
					}
				});
			} catch (e) {
				console.error('卡片分享参数处理失败:', e);
				uni.showToast({ title: '卡片分享失败', icon: 'none' });
			}
		},

		// 返回上一页
		goBack() {
			uni.navigateBack({ delta: 1 });
		},

		// 切换编辑模式
		shop_admin() {
			this.isEdit = !this.isEdit;
			uni.showToast({
				title: this.isEdit ? '已进入编辑模式' : '已退出编辑模式',
				icon: 'none',
				duration: 1500
			});
		},

		// 管理商品
		editgood() {
			uni.navigateTo({
				url: '/pages/saleGood/saleGood',
				fail: (e) => {
					console.error('进入商品管理页失败:', e);
					uni.showToast({ title: '商品管理页打开失败', icon: 'none' });
				}
			});
		},

		// 选择子分类
		handleSubCategory(id) {
			this.subCategoryId = id;
			this.initGood();
		},

		// 选择主分类
		changeCategory(id) {
			this.selectedCategoryId = id;
			this.subCategoryId = -1; // 重置子分类选择
			this.initGood();
		},

		// 进入搜索页
		handleSearch() {
			if (!this.groupId) {
				uni.showToast({ title: '参数错误，无法搜索', icon: 'none' });
				return;
			}
			uni.navigateTo({
				url: `/pages/searchGood/searchGood?groupId=${this.groupId}`,
				fail: (e) => {
					console.error('进入搜索页失败:', e);
					uni.showToast({ title: '搜索页打开失败', icon: 'none' });
				}
			});
		},

		// 添加到购物车
		addToCart(product) {
			try {
				if (!product) return;
				this.$store.commit('cart/addItem', { ...product, quantity: 1 });
				uni.vibrateShort();
				uni.showToast({ title: '已加入购物车', duration: 1500 });
			} catch (e) {
				console.error('添加购物车失败:', e);
				uni.showToast({ title: '添加失败', icon: 'none' });
			}
		},

		// 进入商品详情
		navigateToDetail(item) {
			if (!item || !item.productId) {
				uni.showToast({ title: '商品信息错误', icon: 'none' });
				return;
			}
			const id = item.productId;
			uni.navigateTo({
				url: `/pages/goodBuy/goodBuy?id=${id}`,
				fail: (e) => {
					console.error('进入详情页失败:', e);
					uni.showToast({ title: '详情页打开失败', icon: 'none' });
				}
			});
		},

		// 加载更多（可扩展为真实分页加载）
		loadMore() {
			if (this.loadingStatus === 'loading') return;
			this.loadingStatus = 'loading';
			// 模拟加载延迟
			setTimeout(() => {
				// 实际项目中此处应请求下一页数据并追加到productList
				this.loadingStatus = 'noMore'; // 若无更多数据，设为noMore
				// this.loadingStatus = 'more'; // 若有更多数据，保持more
			}, 1000);
		},

		// 促销标签样式
		tagStyle(tag) {
			const styleMap = {
				限时折扣: { background: '#e64340', color: '#fff' },
				新品上市: { background: '#07c160', color: '#fff' },
				爆款热卖: { background: '#ff976a', color: '#fff' }
			};
			// 修复：默认显示透明背景，避免标签不显示
			return styleMap[tag] || { display: 'none' };
		},

		// 初始化商品列表
		async initGood(id) {
			const currentId = id ;
			if (!currentId) return;
			const query = { groupId: String(currentId) };

			// 添加分类筛选条件
			if (this.selectedCategoryId) {
				query.categorize = Number(this.selectedCategoryId);
			}
			if (this.subCategoryId > 0) {
				query.subCategorize = Number(this.subCategoryId);
			}

			try {
				const { data: list } = await db.collection('sendgood').where(query).get();
				// 格式化商品数据，确保字段完整性
				this.productList = list.map((item) => ({
					sendTime: item.sendTime || new Date().getTime(),
					categorize: item.categorize || 0,
					subCategorize: item.subCategorize || 0,
					productId: item.productId || '',
					photo: item.photo || [],
					productName: item.productName || '未命名商品',
					price: Number(item.price) || 0,
					originalPrice: Number(item.originalPrice) || 0,
					description: item.description || '暂无描述',
					sales: Number(item.sales) || 0,
					unit: item.unit || '件',
					stock: Number(item.stock) || 0,
					sendUserId: item.sendUserId || '',
					tag: item.tag || ''
				}));
				console.log('商品列表加载成功，共', list);
			} catch (error) {
				console.error('商品列表查询失败:', error);
				this.productList = [];
				uni.showToast({ title: '商品加载失败', icon: 'none', duration: 2000 });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 全局变量定义 */
$color-primary: #007aff;
$color-danger: #e64340;
$color-success: #07c160;
$color-warning: #ff976a;
$color-gray-100: #f5f5f5;
$color-gray-200: #ebebeb;
$color-gray-300: #ccc;
$color-gray-600: #666;
$color-gray-900: #333;
$color-white: #ffffff;
$border-radius: 16rpx;
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
$transition-base: all 0.2s ease;
$sub-category-width: 180rpx; // 子分类宽度变量

/* 页面容器：修复overflow导致的内容裁剪问题 */
.container-shop {
	position: relative;
	width: 100vw;
	min-height: 100vh;
	background-color: $color-gray-100;
	/* 关键：padding-top = 导航栏高度(100rpx) + 安全区顶部距离 + 预留间隙(10rpx) */
	padding-top: calc(100rpx + var(--safe-area-top, 0) + 10rpx);
	overflow-x: hidden;
	/* 定义安全区变量，方便全局使用 */
	--safe-area-top: #{v-bind('saveTop')}px;
	--navbar-height: 100rpx; /* 导航栏固定高度 */
}

/* 导航栏：修复样式绑定错误，适配安全区 */
.navbar {
		position: fixed;
		left: 0;
		right: 0;
		height: var(--navbar-height); /* 引用固定高度变量 */
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $color-white;
		box-shadow: $shadow-sm;
		z-index: 999;
		padding: 0 30rpx;
		/* 防止导航栏内容溢出 */
		box-sizing: border-box;

	.nav-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: $transition-base;

		&:active {
			background-color: $color-gray-200;
			border-radius: 50%;
		}
	}
	
.search-bar-wrapper {
	/* 关键：margin-top = 安全区顶部距离 + 导航栏高度 - 页面容器padding-top的重叠部分 */
	/* 实际效果：与导航栏底部保持10rpx间隙，彻底避免重叠 */

	padding: 0 20rpx; /* 与页面两侧对齐 */
	box-sizing: border-box;
}
	/* 修复：管理员右侧按钮显示控制 */
	.right-btn {
		visibility: visible;
	}
	.nav-btn:not(.right-btn) {
		visibility: hidden;
	}
	.nav-btn.left-btn {
		visibility: visible; // 左侧返回按钮始终显示
	}

	.nav-title {
		font-size: 32rpx;
		color: $color-gray-900;
		font-weight: 500;
	}
}

/* 搜索栏：修复与导航栏重叠，调整间距 */
.search-bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 70rpx;
	background-color: $color-gray-200;
	border-radius: 35rpx;
	padding: 0 24rpx;
	
	cursor: pointer;
	transition: $transition-base;
	/* 彻底移除可能导致重叠的margin */
	margin: 0 25rpx;

	&:active {
		background-color: #dedede;
	}

	.search-icon {
		margin-right: 16rpx;
	}

	.search-placeholder {
		flex: 1;
		font-size: 28rpx;
		color: $color-gray-300;
	}

	.search-btn {
		min-width: 100rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background-color: $color-primary;
		color: $color-white;
		font-size: 28rpx;
		border-radius: 28rpx;
		margin-left: 16rpx;
	}
}

/* 主分类滚动容器：修复内部元素排列 */
.category-scroll {
	width: 100vw;
	height: 80rpx;
	background-color: $color-white;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 20rpx;
	box-shadow: $shadow-sm;
	z-index: 90;

	/* 修复：用flex确保内部元素横向排列 */
	.category-scroll-content {
		display: flex;
		align-items: center;
		height: 100%;
		gap: 10rpx; // 元素间距
	}

	.category-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		padding: 0 30rpx;
		background-color: $color-gray-100;
		color: $color-gray-600;
		font-size: 28rpx;
		border-radius: 30rpx;
		cursor: pointer;
		transition: $transition-base;

		&:active {
			transform: scale(0.98);
		}

		&.active {
			background-color: $color-primary;
			color: $color-white;
			font-weight: 500;
		}
	}

	/* 分类编辑遮罩：修复层级和样式，避免遮挡文字 */
	.category-edit-mask {
		position: absolute;
		top: 0;
		right: 0;
		height: 30rpx;
		padding: 0 10rpx;
		background-color: $color-danger;
		color: $color-white;
		font-size: 18rpx;
		border-radius: 0 0 0 15rpx;
		z-index: 1;
	}
}

/* 分类设置按钮：确保样式统一，与分类项协调 */
.add-category-tip {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60rpx;
	padding: 0 20rpx;
	background-color: rgba(0, 122, 255, 0.05);
	border: 2rpx solid $color-primary;
	border-radius: 30rpx;
	color: $color-danger;
	font-size: 26rpx;
	font-weight: 500;
	cursor: pointer;
	transition: $transition-base;
	gap: 8rpx;

	&:active {
		background-color: rgba(0, 122, 255, 0.1);
	}

	.tip-icon {
		color: $color-primary;
	}
}

/* 子分类侧边栏：修复top值，适配导航栏 */
.sub-category {
	position: fixed;
	left: 0;
	width: $sub-category-width;
	background-color: $color-white;
	border-radius: 0 $border-radius $border-radius 0;
	border-top-right-radius: 0rpx;
	box-shadow: $shadow-sm;
	z-index: 80;
	overflow: hidden;

	.sub-category-item {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 26rpx;
		color: $color-gray-600;
		cursor: pointer;
		transition: $transition-base;

		&:active {
			background-color: $color-gray-100;
		}

		&.active {
			background-color: $color-gray-100;
			color: $color-primary;
			font-weight: 500;
			border-left: 4rpx solid $color-primary;
		}
	}
}

/* 商品列表容器：修复margin-left和高度计算 */
.product-container {
	position: relative;
	min-height: calc(100vh - 280rpx - var(--safe-area-top, 0));
	padding: 20rpx 20rpx 140rpx;
	box-sizing: border-box;

	&.has-sub-category {
		margin-left: $sub-category-width;
	}
}

/* 无商品提示：优化样式，居中显示 */
.empty-tip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
	color: $color-gray-300;

	.empty-text {
		margin-top: 20rpx;
		font-size: 28rpx;
	}
}

/* 商品列表滚动区：修复高度溢出 */
.product-list {
	width: 100%;
	height: calc(100vh - 330rpx - var(--safe-area-top, 0));

	/* 网格模式 */
	.product-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20rpx;
		margin-bottom: 20rpx;

		.product-card {
			width: calc(50% - 10rpx);
			background-color: $color-white;
			border-radius: $border-radius;
			overflow: hidden;
			box-shadow: $shadow-sm;
			transition: $transition-base;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
			}

			.card-img-wrapper {
				position: relative;
				width: 100%;
				height: 360rpx;
				overflow: hidden;

				.product-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.product-tag {
					position: absolute;
					top: 16rpx;
					left: 0;
					padding: 6rpx 24rpx;
					color: $color-white;
					font-size: 22rpx;
					border-radius: 0 20rpx 20rpx 0;
				}

				.card-admin-ops {
					position: absolute;
					top: 16rpx;
					right: 16rpx;
					display: flex;
					flex-direction: column;
					gap: 12rpx;

					.admin-op-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 60rpx;
						height: 60rpx;
						background-color: rgba(255, 255, 255, 0.8);
						border-radius: 50%;
						font-size: 20rpx;
						color: $color-primary;
						cursor: pointer;
						transition: $transition-base;

						&:active {
							background-color: rgba(255, 255, 255, 1);
						}
					}
				}

				.edit-mask {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.6);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: $color-white;
					cursor: pointer;

					.edit-text {
						margin-top: 16rpx;
						font-size: 28rpx;
					}
				}
			}

			.card-info {
				padding: 20rpx;

				.card-title {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 28rpx;
					color: $color-gray-900;
					line-height: 40rpx;
					margin-bottom: 8rpx;
				}

				.card-desc {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					font-size: 24rpx;
					color: $color-gray-600;
					margin-bottom: 16rpx;
				}

				.card-price-bar {
					display: flex;
					align-items: baseline;
					margin-bottom: 16rpx;

					.current-price {
						font-size: 32rpx;
						color: $color-danger;
						font-weight: 500;
					}

					.original-price {
						font-size: 24rpx;
						color: $color-gray-300;
						text-decoration: line-through;
						margin-left: 12rpx;
					}
				}

				.card-sales-bar {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.sales-count {
						font-size: 24rpx;
						color: $color-gray-600;
					}

					.add-cart-icon {
						width: 40rpx;
						height: 40rpx;
						cursor: pointer;
					}
				}
			}
		}
	}

	/* 列表模式 */
	.product-list-mode {
		.list-item {
			display: flex;
			align-items: center;
			background-color: $color-white;
			border-radius: $border-radius;
			overflow: hidden;
			box-shadow: $shadow-sm;
			margin-bottom: 20rpx;
			transition: $transition-base;

			&:active {
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
			}

			.list-img {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				cursor: pointer;

				.list-img-src {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.list-info {
				flex: 1;
				padding: 20rpx;

				.list-title {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 28rpx;
					color: $color-gray-900;
					margin-bottom: 8rpx;
					cursor: pointer;
				}

				.list-desc {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					font-size: 24rpx;
					color: $color-gray-600;
					margin-bottom: 12rpx;
				}

				.list-price {
					font-size: 30rpx;
					color: $color-danger;
					font-weight: 500;
				}
			}

			.list-actions {
				width: 200rpx;
				padding: 0 20rpx;
				flex-shrink: 0;
			}
		}
	}

	/* 加载更多 */
	.load-more-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}
}

/* 购物车数量控制 */
.quantity-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8rpx;

	.quantity-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $color-gray-100;
		border-radius: 50%;
		font-size: 32rpx;
		color: $color-gray-600;
		cursor: pointer;
		transition: $transition-base;

		&:active {
			background-color: $color-gray-200;
		}

		&.plus-btn {
			background-color: $color-primary;
			color: $color-white;
		}
	}

	.quantity-num {
		min-width: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: $color-gray-900;
	}
}

/* 新增商品按钮：适配安全区底部 */
.add-good-btn {
	position: fixed;
	right: 30rpx;
	bottom: calc(30rpx + var(--safe-area-bottom, 0));
	width: 120rpx;
	height: 120rpx;
	background-color: $color-primary;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: $color-white;
	box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.4);
	cursor: pointer;
	transition: $transition-base;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	}

	.add-btn-text {
		margin-top: 8rpx;
		font-size: 24rpx;
	}
}

/* 响应式适配：小屏幕优化 */
@media (max-width: 320px) {
	.category-item {
		padding: 0 20rpx !important;
		font-size: 26rpx !important;
	}

	.sub-category {
		width: 140rpx !important;
	}

	.product-container.has-sub-category {
		margin-left: 160rpx !important;
	}

	.add-good-btn {
		width: 100rpx;
		height: 100rpx;
	}
}
</style>